<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地PVP对决 - 贪吃蛇大作战</title>
    <link rel="stylesheet" href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/local-pvp.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏头部信息 -->
        <div class="game-header">
            <div class="player-info player1-info">
                <div class="player-avatar">
                    <i class="bi bi-person-fill"></i>
                </div>
                <div class="player-name">玩家1 (WASD)</div>
                <div class="player-score">得分: <span id="player1-score">0</span></div>
            </div>
            
            <div class="game-timer">
                <div class="timer-label">剩余时间</div>
                <div class="timer-display" id="timer">02:00</div>
            </div>
            
            <div class="player-info player2-info">
                <div class="player-avatar">
                    <i class="bi bi-person-fill"></i>
                </div>
                <div class="player-name">玩家2 (方向键)</div>
                <div class="player-score">得分: <span id="player2-score">0</span></div>
            </div>
        </div>

        <!-- 游戏画布 -->
        <div class="game-area">
            <canvas id="gameCanvas" width="800" height="600"></canvas>
            
            <!-- 游戏控制按钮 -->
            <div class="game-controls">
                <button id="pauseBtn" class="btn btn-warning">
                    <i class="bi bi-pause-fill"></i> 暂停
                </button>
                <button id="restartBtn" class="btn btn-info">
                    <i class="bi bi-arrow-clockwise"></i> 重新开始
                </button>
                <button id="backBtn" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> 返回
                </button>
            </div>
        </div>

        <!-- 游戏状态提示 -->
        <div id="gameOverlay" class="game-overlay">
            <div class="overlay-content">
                <h2 id="overlayTitle">本地PVP对决</h2>
                <p id="overlayMessage">准备开始双人对战</p>
                
                <!-- 操作说明 -->
                <div class="instruction-section">
                    <h5><i class="bi bi-keyboard"></i> 操作说明</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="control-info">
                                <h6 class="text-primary">玩家1 (WASD)</h6>
                                <div class="keyboard-layout">
                                    <div class="key-row">
                                        <div class="key key-w">W</div>
                                    </div>
                                    <div class="key-row">
                                        <div class="key key-a">A</div>
                                        <div class="key key-s">S</div>
                                        <div class="key key-d">D</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="control-info">
                                <h6 class="text-danger">玩家2 (方向键)</h6>
                                <div class="keyboard-layout">
                                    <div class="key-row">
                                        <div class="key key-up">↑</div>
                                    </div>
                                    <div class="key-row">
                                        <div class="key key-left">←</div>
                                        <div class="key key-down">↓</div>
                                        <div class="key key-right">→</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="common-controls mt-3">
                        <h6 class="text-warning">通用功能键</h6>
                        <div class="key key-space">空格键</div>
                        <span class="key-description">加速移动（所有玩家）</span>
                    </div>
                </div>
                
                <!-- 游戏规则说明 -->
                <div class="rules-section mt-4">
                    <h5><i class="bi bi-info-circle"></i> 游戏规则</h5>
                    <ul class="rules-list">
                        <li>游戏时长：2分钟</li>
                        <li>食物规则：普通食物、金色食物、移动食物</li>
                        <li>得分规则：吃食物增加长度和得分</li>
                        <li>碰撞规则：撞墙或撞到对方蛇身则死亡</li>
                        <li>胜利条件：时间结束时得分高者获胜</li>
                    </ul>
                </div>
                
                <button id="startBtn" class="btn btn-success btn-lg mt-4">
                    <i class="bi bi-play-fill"></i> 开始游戏
                </button>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div id="gameResult" class="game-result hidden">
            <div class="result-content">
                <h2 id="resultTitle">游戏结束</h2>
                <div class="result-stats">
                    <div class="stat">
                        <span class="stat-label">玩家1得分:</span>
                        <span id="finalPlayer1Score" class="stat-value">0</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">玩家2得分:</span>
                        <span id="finalPlayer2Score" class="stat-value">0</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">游戏时长:</span>
                        <span id="gameDuration" class="stat-value">00:00</span>
                    </div>
                    <div class="stat winner-stat">
                        <span class="stat-label">获胜者:</span>
                        <span id="winner" class="stat-value">-</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">结束原因:</span>
                        <span id="gameEndReason" class="stat-value">-</span>
                    </div>
                </div>
                <div class="result-actions">
                    <button id="playAgainBtn" class="btn btn-primary">
                        <i class="bi bi-arrow-repeat"></i> 再玩一次
                    </button>
                    <button id="backToMenuBtn" class="btn btn-secondary">
                        <i class="bi bi-house-fill"></i> 返回主页
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/local-pvp.js"></script>
</body>
</html>